<template>
  <div class="addMaintainPlan zy-content">
    <back-level :goPage="back" />
    <Card :title="`${!editId ? `${$t('maintenance.NewPlan')}` : `${$t('maintenance.EditPlan')}`}`"
      class="detail-content-layout">
      <div class="line-title">
        <Steps :current="current" class="steps">
          <Step :title="`${$t('maintenance.choseItem')}`"></Step>
          <Step :title="`${$t('maintenance.addmaintenance')}`"></Step>
          <Step :title="`${$t('maintenance.newTime')}`"></Step>
        </Steps>
      </div>
      <!-- 第一步 -->
      <div class="searchBox" v-if="current === 0">
        <Form class="search-form" ref="stepOneValidate" :rules="stepOneRuleValidate" :model="formInline">
          <div class="labelTop">
            <FormItem :label="`${$t('maintenance.plan')}`" class="item " prop="planName">
              <Input type="text" v-model="formInline.planName" @on-change="planNamechange"
                :placeholder="`${$t('common.inputInfo')}`" clearable class="inputBorder" :maxlength="100"></Input>
            </FormItem>
          </div>
        </Form>
        <div class="addDev" @click="addDev">
          <Icon type="md-add-circle" size="20" />
          {{ $t('ledger.NewDevice') }}
        </div>
        <div class="tableContent">
          <Table border class="resizable-table" @on-column-width-resize="onColumnWidthResize" :columns="columns"
            :data="data">
            <template slot-scope="{ row }" slot="action">
              <span class="operationBtn" @click="deleteDevRow(row)">{{ $t('common.Delete') }}</span>
            </template>
          </Table>
        </div>
        <Modal :mask-closable="false" v-model="addDevVisible" :title="`${$t('ledger.NewDevice')}`" width="1400"
          class="addDevModal modal-content-layout">
          <Form class="search-form" label-position="top">
            <div class="label">
              <FormItem :label="`${$t('common.company')}`" class="item mr16">
                <Select v-model="searchParams.belongCompanyId" filterable clearable
                  :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item) of companyList" :value="item.id" :label="item.name" :key="item.id">
                  </Option>
                </Select>
              </FormItem>
              <FormItem :label="`${$t('common.Installation')}`" class="item mr16">
                <Cascader clearable :data="orgList" @on-change="handleCasChangeOne" v-model="orgIdList"
                  :placeholder="`${$t('common.selectInfo')}`" change-on-select></Cascader>
              </FormItem>
              <FormItem :label="`${$t('maintenance.EquipmentNo')}`" class="item mr16">
                <!-- <Select v-model="searchParams.deviceNo" filterable label-in-value clearable
                  :remote-method="searchDevice" :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item, index) of deviceList" :value="item.deviceNo" :key="index"
                    :label="item.deviceNo + '-' + item.deviceName">
                  </Option>
                </Select> -->
                <Input v-model="searchParams.deviceNo" :placeholder="`${$t('common.inputInfo')}`"
                  class="inputBorder" :maxlength="32"></Input>
              </FormItem>
              <FormItem :label="`${$t('equipCheck.Model')}`" class="item mr16">
                <Input type="text" v-model="searchParams.deviceSpec" :placeholder="`${$t('common.inputInfo')}`"
                  class="inputBorder" :maxlength="32"></Input>
              </FormItem>
              <FormItem label="" class="item">
                <Button style="position: relative;top:11px;" class="ivu-btn-lg" type="primary" @click="changeNum">
                  {{ $t('common.Query') }}
                </Button>
              </FormItem>
            </div>
          </Form>
          <div>
            <Table border class="resizable-table" @on-column-width-resize="onColumnWidthResize" ref="devSelection"
              :columns="addDevcolumns" :data="addDevdata" @on-selection-change="handleSelectionChange"></Table>
            <div class="pageWrap mt16">
              <pageLeftTitle :total="addDevpageParams.total" :selected="selectData.length" />
              <Page :total="addDevpageParams.total" :page-size="addDevpageParams.pageSize"
                :page-size-opts="$variable.pageSizes" :current="addDevpageParams.pageNum" @on-change="changePageNum"
                @on-page-size-change="changePageSize" show-sizer show-total />
            </div>
          </div>
          <div slot="footer">
            <Button type="default" @click="addDevCancel">{{ $t('common.Cancle') }}</Button>
            <Button type="primary" @click="addDevOk">{{ $t('maintenance.Confirmed') }}</Button>
          </div>
        </Modal>
      </div>
      <!-- 第二步 -->
      <div v-if="current === 1" class="third">
        <div class="addPlan" @click="addPlan">
          <Icon type="md-add-circle" size="20" />
          {{ $t('maintenance.addmaintenance') }}
        </div>
        <div class="tableContent">
          <Table border class="resizable-table" @on-column-width-resize="onColumnWidthResize" ref="selection"
            :columns="contentColumns" :data="contentData">
            <template slot-scope="{ row }" slot="action">
              <span class="operationBtn" @click="seeDetail(row)">{{ $t('common.Detail') }}</span>
              <span class="operationBtn" @click="deleteRow(row)">{{ $t('common.Delete') }}</span>
            </template>
          </Table>
        </div>
        <Modal :mask-closable="false" v-model="visible" :title="`${$t('common.Detail')}`" class="checkContentModal"
          width='1200' footer-hide>
          <contentDetail :formInline="formInline" :materData="materData" :planToolList="toolList"></contentDetail>
        </Modal>
      </div>

      <!-- 第三步 -->
      <div v-if="current === 2" class="second">
        <Form class="search-form" ref="stepTwoValidate" :rules="ruleValidate" :model="stepTwoValidate">
          <Row :gutter="24">
            <Col span="8">
            <FormItem :label="`${$t('maintenance.Level')}`" class="item" prop="itemLevel">
              <Select v-model="stepTwoValidate.itemLevel" clearable :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="item of levelList" :value="item.key" :key="item.key" :label="item.name">
                </Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem :label="`${$t('maintenance.Frequency')}`" class="item" prop="triggerCycle">
              <Select v-model="stepTwoValidate.triggerCycle" filterable clearable @on-change="triggerCycleChange"
                :placeholder="`${$t('common.selectInfo')}`">
                <Option v-for="(item, index) of cycle" :value="item.key" :key="index" :label="item.name">
                </Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem :label="`${$t('maintenance.MaintenanceMethod')}`" class="item" prop="maintainType">
              <Select v-model="stepTwoValidate.maintainType" filterable clearable
                :placeholder="`${$t('common.selectInfo')}`" disabled>
                <Option :value="item.key" v-for="item in cycleInfo" :key="item.key" :label="item.name">
                </Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" >
            <Col span="8">

              <FormItem :label="$t('maintenance.workinghours')" class="item">
            <InputNumber style="width: 100%" v-model="stepTwoValidate.itemHour" disabled></InputNumber>
          </FormItem>
          
   
            </Col>
            <Col span="8">
              <FormItem :label="`${$t('maintenance.createTime')}`" class="item" prop="firstTime">
            <!--          disabledHours: getDisabledHours-->
            <DatePicker type="datetime" :options="options" :time-picker-options="{
      steps: [1, 30, 30],
    }" :placeholder="`${$t('common.selectInfo')}`" v-model="stepTwoValidate.firstTime"></DatePicker>
          </FormItem>
            </Col>
            <Col span="8">
              <FormItem :label="`${$t('maintenance.planEndTime')}`" class="item" prop="planEndTime">
            <DatePicker type="datetime" :options="options1" :time-picker-options="{ steps: [1, 30, 30] }"
              :placeholder="`${$t('common.selectInfo')}`" v-model="stepTwoValidate.planEndTime"></DatePicker>
          </FormItem>
            </Col>
          </Row>
          <Row :gutter="24" class="mt16">
            <Col span="8">
              <FormItem :label="`${$t('maintenance.TriggerInterval')}`" class="item"
            v-if="Number(searchParams.triggerCycle) !== 7">
            <Row style="display:flex !important;justify-content: flex-start;align-items: center;">
              <Col span="16">
              <FormItem prop="intervalRate">
                <!--                :disabled="editId ? true : false"-->
                <InputNumber style="width: 100%" :min="0" :max="999" :formatter="value => `${parseInt(value)}`"
                  v-model="stepTwoValidate.intervalRate"></InputNumber>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem prop="triggerCycle">
                <Select v-model="stepTwoValidate.triggerCycle" filterable clearable disabled
                  :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="item in weeks" :key="item.key" :value="item.key" :label="item.name">
                  </Option>
                </Select>
              </FormItem>
              </Col>
            </Row>
          </FormItem>
            </Col>
            <Col span="8">
              <FormItem :label="`${$t('maintenance.Taskduration')}`" class="item"
            v-if="Number(searchParams.triggerCycle) !== 7">
            <Row style="display:flex !important; justify-content: flex-start;align-items: center;">
              <Col span="9">
              <FormItem>
                <InputNumber style="width: 100%" :min="0" :formatter="value => `${parseInt(value)}`"
                  v-model="stepTwoValidate.day"></InputNumber>
              </FormItem>
              </Col>
              <Col span="2">&nbsp;{{ $t('common.day') }}</Col>
              <Col span="10">
              <FormItem>
                <InputNumber style="width: 100%" :min="0" :formatter="value => `${parseInt(value)}`"
                  v-model="stepTwoValidate.hour"></InputNumber>
              </FormItem>
              </Col>
              <Col span="3">&nbsp;{{ $t('common.hour') }}</Col>
            </Row>
          </FormItem>
            </Col>
            <Col span="8">
              <FormItem :label="`${$t('maintenance.zhuConfirmed')}`" class="item" prop="isConfirm">
            <RadioGroup v-model="stepTwoValidate.isConfirm">
              <Radio :label="1">{{ $t('common.Yes') }}</Radio>
              <Radio :label="0">{{ $t('common.No') }}</Radio>
            </RadioGroup>
          </FormItem>
            </Col>
          </Row>
          <FormItem :label="`${$t('确认人')}:`" class="item" v-if="stepTwoValidate.isConfirm === 1">
            <div style="display:flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;">
              <span style="margin-bottom: 15px;">{{ confirmedName }}</span>
              <Button @click="chosePeople" type="primary" size="small">{{ $t('选择确认人') }}</Button>
            </div>
          </FormItem>
          <FormItem :label="$t('是否自动分配')" class="item">
            <RadioGroup v-model="stepTwoValidate.autoDistribution">
              <Radio :label="1">{{ $t('common.Yes') }}</Radio>
              <Radio :label="0">{{ $t('common.No') }}</Radio>
            </RadioGroup>
          </FormItem>
        </Form>
      </div>

      <div class="nextBtn">
        <Button @click="previous" v-if="current !== 0">{{ $t('common.Pre') }}</Button>
        <Button type="primary" @click="next" v-if="current !== 2">{{ $t('common.Next') }}</Button>
        <Button type="primary" :loading="loading" @click="create" v-if="current === 2">
          {{ $t('common.Creatingsuccessful') }}
        </Button>
      </div>
    </Card>


    <Drawer :title="`${$t('maintenance.addmaintenance')}`" :styles="styles" :scrollable="true" v-model="drawerVisible"
      width="1200" class="drawer">
      <div class="search">
        <Col span="24">
        <Row>
          <Col span="6" style="padding: 0 5px">
          <label>{{ $t('maintenance.MaintenanceItem') }}</label>
          <Input v-model="searchPlanParams.itemProject" clearable :placeholder="`${$t('common.inputInfo')}`"/>
          </Col>
          <Col span="6" style="padding: 0 5px">
          <label>{{ $t('设备等级') }}</label>
          <Select v-model="searchPlanParams.categoryName" filterable @on-change="categorySelectChange" clearable
            :placeholder="`${$t('common.selectInfo')}`" class="select">
            <Option v-for="v in category" :value="v.value" :key="v.value" :label="v.label">
            </Option>
          </Select>
          </Col>
          <Col span="6" style="padding: 0 5px">
          <label>{{ $t('设备类别') }}</label>
          <Select v-model="searchPlanParams.deviceType" filterable clearable
            :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="(item, index) of deviceTypeList" :value="item.value" :key="index" :label="item.value" />
          </Select>
          </Col>
          <Col span="6" style="padding: 0 5px">
          <label>{{ $t('保养级别') }}</label>
          <Select v-model="searchPlanParams.itemLevel" clearable :placeholder="`${$t('common.selectInfo')}`">
            <Option v-for="item of levelList" :value="item.key" :key="item.key" :label="item.name">
            </Option>
          </Select>
          </Col>
        </Row>
        </Col>
        <Col span="24" style="padding-top: 10px">
        <Row>
          <div style="display: flex; align-items: center; justify-content: flex-start;">
            <Col span="6" style="padding: 0 5px">
            <label>{{ $t('保养周期') }}</label>
            <Select v-model="searchPlanParams.triggerCycle" filterable clearable
              :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of cycle" :value="item.key" :key="index" :label="item.name">
              </Option>
            </Select>
            </Col>
            <Col span="6" style="padding: 0 5px">
            <label>{{ $t('保养位置') }}</label>
            <Select filterable clearable class="select" v-model="searchPlanParams.bomId"
              :placeholder="`${$t('common.selectInfo')}`" @on-change="materielNoChangeBom"
              :remote-method="materielNoChange">
              <Option v-for="item in materielNoList" :value="item.id" :label="item.materielNo + '-' + item.materielName"
                :key="item.id" />
            </Select>
            </Col>

            <!-- <Col span="6" style="padding: 0 5px">
            <label>{{ $t('安装位置') }}</label>
            <Cascader :data="orgList" :transfer="true" v-model="orgCodeList" change-on-select
              @on-change="handleCasChange" />
            </Col> -->

            <Col span="6" style="padding: 0 5px">
            <label>设备流水号</label>
            <Select v-model="searchPlanParams.deviceMId" filterable clearable
              :placeholder="`${$t('common.inputInfo')}设备流水号`" :remote-method="handleRemote">
              <Option v-for="item in deviceMIdList" :value="item.deviceMId" :label="item.desc" :key="item.deviceMId" />
            </Select>
            </Col>
          </div>
        </Row>
        </Col>
        <Col span="24" style="padding-top: 10px;display: flex; justify-content: center">
        <Button type="primary" class="ivu-btn-lg" @click="changePlanNum">{{ $t('common.Query') }}</Button>
        <Button class="ivu-btn-lg" @click="searchPlanParams = {};changePlanNum()">重置</Button>
        </Col>
      </div>
      <div class="tableContent" style="margin: 10px">
        <Table border class="resizable-table" @on-column-width-resize="onColumnWidthResize" ref="drawerSelection"
          :columns="drawerColumns" :data="drawerData" @on-selection-change="handleDrawerChange"></Table>
      </div>
      <div class="demo-drawer-footer">
        <Page :total="drawerTotal" :page-size="drawerpageSize" :page-size-opts="$variable.pageSizes"
          :current="drawerpageNum" @on-change="drawerchangePageNum" @on-page-size-change="drawerchangePageSize"
          show-sizer show-total />
        <div>
          <Button class="ivu-btn-lg" style="margin-right: 8px" @click="handleDrawerCancel">{{
      $t('common.Cancle')
    }}
          </Button>
          <Button class="ivu-btn-lg" type="primary" @click="handleDrawerOk">{{ $t('maintenance.Confirmed') }}</Button>
        </div>
      </div>
    </Drawer>

    <signle-common-modal ref="signleCommonModal" @handleRefresh="handleRefresh" />
  </div>
</template>

<script>
import recursion from '@/util/recursion'
import contentDetail from './contentDetail.vue'
import {mapGetters} from 'vuex'
import toggleTableOperation from "@/mixins/toggleTableOperation";
import signleCommonModal from "@/views/devScene/repair/modules/signleCommonModal";
export default {
  name: "addMaintainPlan",
  mixins:[toggleTableOperation],
  components: {
    contentDetail,
    signleCommonModal
  },
  props: ['mainDevice', 'factoryList', 'planPositionList', 'planClassifyList', 'editId'],
  data() {
    return {
      customCacheKey:"addMaintainPlanStep1",
      drawerTotal:0,
      drawerpageSize:10,
      drawerpageNum:1,
      pageSizeOption: [10, 20, 30, 40],
      deviceMIdList: [],
      selectData: [],
      current: 0,
      visible: false,
      drawerVisible: false,
      loading: false,
      addDevVisible: false,
      disabledMinutes: [0, 10, 20],
      searchParams: {},
      searchPlanParams: {},
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'scroll',
        paddingBottom: '53px',
        position: 'static'
      },
      formInline: {
        categoryName: '',
        planName: '',
      },
      stepOneRuleValidate: {
        categoryName: [
          {required: true, message: "请选择设备类别", trigger: "change"},
        ],
        planName: [
          {required: true, message: "请输入保养计划（设备类别_保养级别_保养周期）", trigger: "blur"},
        ],
      },
      stepTwoValidate: {
        autoDistribution: 0,
        maintainType: '',
        intervalRate: null,
        triggerCycle: '',
        isConfirm: 0,
        day: null,
        hour: null,
        firstTime: this.$moment(new Date()).format('YYYY-MM-DD HH:00:00'),
        planEndTime: this.$moment(new Date()).format('YYYY-MM-DD HH:00:00')
      },
      options: {
        // disabledDate (date) {
        //   return date && date.valueOf() < Date.now() - 86400000;
        // }
      },
      options1: {
        disabledDate: (date) => {
          let data = this.stepTwoValidate.firstTime ? this.stepTwoValidate.firstTime : ''
          return date && date.valueOf() <= new Date(data).valueOf();
        }
      },
      ruleValidate: {
        maintainType: [
          {required: true, message: "请输入保养方式", trigger: "change"},
        ],
        intervalRate: [
          {required: true, type: 'number', message: "请输入间隔", trigger: "blur"},
        ],
        triggerCycle: [
          {required: true, message: "请选择周期", trigger: "change"},
        ],
        itemLevel: [
          {required: true, message: "请选择保养级别"},
        ],
        isConfirm: [
          {required: true, message: "请选择是否需要"},
        ],
        firstTime: [
          {required: true, message: "请选择日期"},
        ],
        planEndTime: [
          {required: true, message: "请选择日期"},
        ],
        day: [
          {required: true, type: 'number', message: "请输入天数", trigger: "blur"},
        ],
        hour: [
          {required: true, type: 'number', message: "请输入小时", trigger: "blur"},
        ],
      },
      columns: [
        {
          type: 'index',
          width: 80,
          title: `${this.$t('common.index')}`,
          align: 'center',
          resizable: true,
        },
        {
          title: `${this.$t('common.company')}`,
          key: "brand",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('common.Installation')}`,
          key: "position6",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('设备类别')}`,
          key: "deviceCategory",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('maintenance.EquipmentNo')}`,
          key: "deviceNo",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('设备名称')}`,
          key: "deviceName",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('资产编号')}`,
          key: "assetCode",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('equipCheck.Model')}`,
          key: "deviceSpec",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {title: `${this.$t('common.operation')}`, slot: "action", align: "center", minWidth: 100,},
      ],
      addDevcolumns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: `${this.$t('common.company')}`,
          key: "brand",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t('common.Installation')}`,
          key: "installPositionName",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('设备类别')}`,
          key: "deviceCategory",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('maintenance.EquipmentNo')}`,
          key: "deviceNo",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('ledger.EquipmentType')}`,
          key: "deviceSpec",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('设备名称')}`,
          key: "deviceName",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('资产编号')}`,
          key: "assetCode",
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
      ],
      addDevdata: [],
      data: [],
      confirmedName:"",
      confirmedBy:"",
      materialList: {},
      toolList: [],
      materData: [],
      drawerSelectionData: [],
      // category: this.mainDevice,
      category: [
        {label: 'A', value: 'A'},
        {label: 'B', value: 'B'},
        {label: 'C', value: 'C'},
      ],
      companyList: this.factoryList,
      position: this.planPositionList,
      classification: this.planClassifyList,
      levelList: [
        {name: "一级保养", key: 1},
        {name: "二级保养", key: 2},
        {name: "三级保养", key: 3},
      ],
      cycleInfo: [
        {name: '定期保养', key: '1'},
        {name: '计时保养', key: '3'},
      ],
      cycle: [
        {name: '小时', key: '8'},
        {name: "班次", key: "7"},
        {name: '日', key: '1'},
        {name: '周', key: '2'},
        {name: '月', key: '3'},
        {name: '季度', key: '4'},
        {name: '半年', key: '5'},
        {name: '年', key: '6'},
      ],
      weeks: [
        {name: '小时', key: '8'},
        {name: "班次", key: "7"},
        {name: '日', key: '1'},
        {name: '周', key: '2'},
        {name: '月', key: '3'},
        {name: '季度', key: '4'},
        {name: '半年', key: '5'},
        {name: '年', key: '6'},
        // {name: '计数', key: '7'},
      ],
      tempWeeks: [
        {name: '小时', key: '8'},
        {name: "班次", key: "7"},
        {name: '日', key: '1'},
        {name: '周', key: '2'},
        {name: '月', key: '3'},
        {name: '季度', key: '4'},
        {name: '半年', key: '5'},
        {name: '年', key: '6'},
      ],
      pageParams: {
        total: 64,
        pageSize: 10,
        pageNum: 1,
        pageSizeOption: [10, 20, 30, 40],
      },
      addDevpageParams: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
        pageSizeOption: [50, 100, 150, 200],
      },
      contentColumns: [
        {
          type: 'index',
          width: 80,
          title: `${this.$t('common.index')}`,
          align: 'center'
        },
        {
          title: `${this.$t('maintenance.Level')}`,
          key: 'itemLevelName',
          align: 'center',
          minWidth: 100,
          tooltip: true,
          render: (h, params) => {
            return h('div', [
              h('span', {}, this.levelList.find(val => val.key === params.row.itemLevel).name)
            ])
          },
          resizable: true,
        },
        {
          title: `${this.$t('显示顺序')}`,
          key: 'sequence',
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('maintenance.MaintenanceItem')}`,
          key: 'itemProject',
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('maintenance.MaintenanceMethod')}`,
          key: 'itemMethod',
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('maintenance.numberRequirements')}`,
          key: 'minValue',
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t('maintenance.Maintenancestandards')}`,
          key: 'unitName',
          align: 'center',
          minWidth: 100,
          tooltip: true,
          resizable: true,
        },
        {title: `${this.$t('common.operation')}`, slot: 'action', minWidth: 200, align: 'center'},
      ],
      contentData: [],
      drawerColumns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        // {
        //   title: `${this.$t("设备等级")}`,
        //   key: "categoryName",
        //   minWidth: 80,
        //   align: "center",
        //   resizable: true,
        //   tooltip: true
        // },
        // {
        //   title: `${this.$t("设备类别")}`,
        //   key: "deviceType",
        //   minWidth: 180,
        //   align: "center",
        //   resizable: true,
        //   tooltip: true
        // },
        // {
        //   title: `${this.$t("maintenance.EquipmentNo")}`,
        //   key: "deviceNo",
        //   align: "center",
        //   minWidth: 100,
        //   resizable: true,
        //   tooltip: true
        // },
        // {
        //   title: `${this.$t("设备名称")}`,
        //   key: "deviceName",
        //   align: "center",
        //   minWidth: 100,
        //   resizable: true,
        //   tooltip: true
        // },
        // {
        //   title: `${this.$t("设备流水号")}`,
        //   key: "deviceMId",
        //   minWidth: 130,
        //   align: "center",
        //   resizable: true,
        //   tooltip: true
        // },
        {
          title: `${this.$t("保养周期")}`,
          key: "triggerCycleName",
          minWidth: 160,
          align: "center",
          resizable: true
        },
        {
          title: `${this.$t("保养级别")}`,
          key: "itemLevelName",
          minWidth: 160,
          align: "center",
          resizable: true
        },
        {
          title: `${this.$t("保养项目")}`,
          key: "itemProject",
          width: 200,
          align: "center",
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t("保养方式")}`,
          key: "itemMethod",
          width: 200,
          align: "center",
          tooltip: true,
          resizable: true
        },
        {
          title: `${this.$t("保养标准")}`,
          key: "unitName",
          minWidth: 200,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: `${this.$t("需求人数")}`,
          key: "minValue",
          minWidth: 140,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: `${this.$t("创建人")}`,
          key: "createName",
          minWidth: 120,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: `${this.$t("是否上传sop")}`,
          key: "sopTag",
          align: "center",
          minWidth: 130,
          resizable: true,
          tooltip: true,
          render: (h, params) => {
            if (Number(params.row.sopTag) >= 0) {
              return h("div", [
                h(
                  "span",
                  this.sopTagList.find(val => val.key == params.row.sopTag).name
                )
              ]);
            } else {
              return h("div", [h("span", "")]);
            }
          }
        },
        {
          title: `${this.$t("创建时间")}`,
          key: "createTime",
          minWidth: 200,
          align: "center",
          resizable: true,
          tooltip: true
        },
      ],
      drawerData: [],
      deviceTypeList: [],
      deviceNameList: [],
      orgList: [],
      orgIdList: [],
      orgCodeList: [],
      materielNoList: [],
      deviceList: []
    };
  },
  computed: {
    ...mapGetters([
      'copyStatus'
    ])
  },
  watch:{
    addDevVisible:function (val){
      if (!val){
        if (this.current==1){
          this.customCacheKey = 'addMaintainPlanStep2'
          this.getColumnWidth(this.contentColumns)
        }
        if (this.current==0){
          this.customCacheKey = 'addMaintainPlanStep1'
          this.getColumnWidth(this.columns)
        }
      }
    },
    drawerVisible:function (val){
      if (!val){
        if (this.current==1){
          this.customCacheKey = 'addMaintainPlanStep2'
          this.getColumnWidth(this.contentColumns)
        }
        if (this.current==0){
          this.customCacheKey = 'addMaintainPlanStep1'
          this.getColumnWidth(this.columns)
        }
      }
    },
  },
  created() {

     this.getColumnWidth(this.columns)

    if (this.editId) {
      this.getPlanDetail(this.editId)
    }
    this.getOrgList()
  },
  // computed: {
  //   getDisabledHours() {
  //     let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
  //     let hours = new Date().getHours()
  //     // let newHours = new Date(this.stepTwoValidate.firstTime).getHours()
  //     let disabledHours = arr.filter(item => item < hours)
  //     return disabledHours
  //   }
  //
  // },
  mounted() {
    this.getFaultCategory("设备类别")
  },
  methods: {
    chosePeople(){
      this.$refs.signleCommonModal.show({}, 'more',this.confirmedBy)
    },
    handleRefresh(userIds,userName) {
      this.confirmedName = userName.join(',')
      this.confirmedBy = userIds.join(',')
    },
    handleCasChangeOne(val, selectedData) {
      this.searchParams.orgId = [val[val.length - 1]]
      // this.formItem.orgName = selectedData[selectedData.length - 1].label
    },
    handleRemote(query) {
      if (!query){
        return
      }
      const fn = this.debounceSerach(()=>{
        let _query = query.split('-')
        if (Array.isArray(_query)) _query = _query[0]
        this.axios({
          method: "post",
          url: "/dms/device/page",
          data: {
            deviceMId: _query,
            pageSize: 99,
            pageNum:1,
            // orgCode:this.searchParams.orgCode || '',
          },
        }).then((res) => {
          if (res.code === 200) {
            this.deviceMIdList = res.data.records.map(item=> {
              item.desc = item.deviceMId + '-' + item.deviceName + '-' + item.deviceNo
              return item;
            })
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        })
      },300)
      fn()
    },
    handleCasChange(val) {
      this.searchPlanParams.orgCode = val[val.length - 1];
    },
    drawerchangePageNum(val){
      this.drawerpageNum = val;
      this.searchPlanList();
    },
    drawerchangePageSize(pageSize){
      this.drawerpageSize = pageSize;
      this.searchPlanList();
    },
    debounceSerach(fn, delay){
      let _this = this
      return function f(...args) {
        if (_this.timeID) {
          clearTimeout(_this.timeID);
        }
        _this.timeID = setTimeout(() => {
          fn(args);
        }, delay);
      };
    },
    materielNoChangeBom(val){
      console.log(val)
    },
    materielNoChange(val,value) {
      if (val && this.materielNoList.find(item=> (item.materielNo + '-' + item.materielName) === val)){
        return;
      }
      const fn = this.debounceSerach(()=>{
        const params = {
          deviceCategory: this.searchPlanParams.deviceCategory,
          param: val
        }
        this.axios({
          method: 'post',
          url: '/dms/dmsBom/queryByDeviceTypeAndDeviceName',
          data:{...params}
        }).then(res => {

          if (res.code === 200) {
            if (res.data) {
              this.materielNoList = res.data
            }
            if (value){
              this.searchPlanParams.bomId = Number(value)
            }
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        })
      },360)
      fn()
    },
    searchDevice(query){
      let orgCode = "";
      if(this.searchParams.orgId){
        orgCode = this.searchParams.orgId.at(-1)
      }

      this.axios({
        method: "get",
        url: "/dms/dmsDevice/deviceListByParams",
        params: {
          orgCode: orgCode,
          param: query,
          deviceCategory: this.formInline.deviceCategory,
          categoryName: this.formInline.categoryName
        },
      }).then((res) => {
        if (res.code === 200) {
          this.deviceList = res.data;
        }
      });
    },
    deviceTypeChange(val) {
      if (this.data && this.data.length) {
        this.data = []
      }
      if (this.contentData && this.contentData.length) {
        this.contentData = []
      }
      if (val) {
        this.formInline.deviceCategory = val
      }
    },
    //获取故障数据
    getFaultCategory(name) {
      this.axios({
        method: 'get',
        url: '/dms/faultCategory/basicDict',
        params: {name}
      }).then(res => {
        if (res.code === 200) {
          this.deviceTypeList = res.data.map(item => {
              if (item.value) return item;
            })
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}))
        }
      })
    },
    planNamechange(val) {
      console.log('触发是啥')
      console.log(val)
      this.formInline.planName = JSON.parse(JSON.stringify(val.target.value))
      localStorage.setItem('planNameInfo', JSON.stringify(val.target.value))
    },
    levelChange() {
      if (this.contentData && this.contentData.length) {
        this.contentData = []
      }
    },
    deviceNameChange() {
      if (this.data && this.data.length) {
        this.data = []
      }
      if (this.contentData && this.contentData.length) {
        this.contentData = []
      }
    },
    triggerCycleChange(val) {
      if (!val) {
        return
      }
      if (val == 8) {
        this.stepTwoValidate.maintainType = '3'
      } else {
        this.stepTwoValidate.maintainType = '1'
      }
      this.stepTwoValidate.triggerCycle = val
    },
    categorySelectChange(categoryName) {
      if (this.data && this.data.length) {
        this.data = []
      }
      if (this.contentData && this.contentData.length) {
        this.contentData = []
      }
      if (categoryName) {
        return this.axios({
          method: 'get',
          url: '/dms/dcmMaintainItem/queryDeviceNames',
          params: {
            categoryName
          }
        }).then(res => {
          if (res.code == 200) {
            this.deviceNameList = res.data.map(val => ({
              label: val,
              value: val
            }))
          }
        })
      }
    },
    back() {
      this.$emit('handlePlanOk')
    },
    getOrgList() {
      this.axios({
        method: 'get',
        url: '/basic/organization/findListByToken',
        params: {}
      }).then(res => {
        if (res.code === 200) {
          const obj = {
            label: 'name',
            value: 'code',
            children: 'children'
          }
          this.orgList = recursion.convertTree(res.data, obj)
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    getPlanDetail(id) {
      this.axios({
        method: 'get',
        url: '/dms/dcmMaintainPlan/queryById',
        params: {
          id
        }
      }).then(async res => {
        if (res.code === 200) {
          this.confirmedName = res.data.confirmedByNames
          this.confirmedBy = res.data.confirmedBy
          localStorage.setItem('planNameInfo', JSON.stringify(res.data.planName))
          this.formInline = {
            deviceCategory: res.data.deviceCategory,
            planName: this.copyStatus ? '' : res.data.planName,
            categoryName: res.data.categoryName ? res.data.categoryName.toString() : ''
          }
          if (res.data.categoryName) {
            await this.categorySelectChange(res.data.categoryName)
          }
          this.searchParams.triggerCycle = res.data.triggerCycle.toString()
          this.searchParams.itemLevel = Number(res.data.itemLevel)
          this.stepTwoValidate = {
            ...res.data,
            day: res.data.pdays,
            hour: res.data.phours,
            maintainType: res.data.maintainType ? res.data.maintainType.toString() : '',
            triggerCycle: res.data.triggerCycle ? res.data.triggerCycle.toString() : ''
          }
          this.data = res.data.dcmMaintainDetailList
          this.contentData = res.data.dcmMaintainProjectList.map(item => {
            return {
              ...item,
              item_project: item.itemProject,
              item_method: item.itemMethod,
              itemHours: item.itemHours,
              unit_name: item.unitName,
              max_value: item.maxValue,
              min_value: item.minValue,
            }
          })
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    changePageSize(pageSize) {
      this.addDevpageParams.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.addDevpageParams.pageNum = val;
      this.searchList();
    },
    next() {
      if (this.current == 0) {
        this.customCacheKey = 'addMaintainPlanStep2'
        this.getColumnWidth(this.contentColumns)
        this.$refs["stepOneValidate"].validate((valid) => {
          if (valid) {
            if (!this.data.length) {
              this.$Message.warning(({content: '请添加保养设备！', duration: 6, closable: true}));
              return false
            }
            if (!this.editId || this.copyStatus) {
              this.axios({
                method: 'get',
                url: '/dms/dcmMaintainPlan/validPlanName',
                params: {
                  planName: this.formInline.planName
                }
              }).then(res => {
                if (res.code == 200) {
                  this.current += 1;
                } else {
                  this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
              })
            } else {
              this.axios({
                method: 'get',
                url: '/dms/dcmMaintainPlan/validPlanName',
                params: {
                  id: this.editId,
                  planName: this.formInline.planName
                }
              }).then(res => {
                if (res.code == 200) {
                  this.current += 1;
                } else {
                  this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
              })
            }
          } else {
            // this.$Message.warning(({content: '请将信息填写完整！', duration: 6, closable: true}));
            return;
          }
        });
      } else if (this.current == 1) {
        this.customCacheKey = 'addMaintainPlanStep2'
        this.getColumnWidth(this.contentColumns)

        if (!this.contentData.length) {
          this.$Message.warning(({content: '请添加保养内容！', duration: 6, closable: true}));
          return false
        }
        let hour = this.contentData.map(item => item.itemHours).reduce((pre, current) => Number(pre) + Number(current))
        this.stepTwoValidate.itemHour = hour
        this.current += 1;
      } else {
        this.current += 1;
        this.customCacheKey = 'addMaintainPlanStep1'
        this.getColumnWidth(this.columns)
      }
    },
    previous() {
      this.current -= 1;
      if (this.current==0){
        this.customCacheKey = 'addMaintainPlanStep1'
        this.getColumnWidth(this.columns)
      }
      if (this.current==0){
        this.customCacheKey = 'addMaintainPlanStep2'
        this.getColumnWidth(this.contentColumns)
      }
    },
    create() {
      this.$refs.stepTwoValidate.validate((valid) => {
        if (valid) {
          const firstTimeinfo = new Date(this.stepTwoValidate.firstTime).getTime()
          const nowTime = new Date().getTime()
          if (Number(firstTimeinfo) < Number(nowTime)) {
            this.$Message.warning(({
              content: '首次生成时间必须大于当前时间！',
              duration: 6,
              closable: true
            }));
            return
          }
          let timeStamp = new Date(this.stepTwoValidate.planEndTime).getTime() - new Date(this.stepTwoValidate.firstTime).getTime()
          let hour = Number(Number(timeStamp) / Number(1000 * 3600))
          let tempDay = this.stepTwoValidate.day ? this.stepTwoValidate.day : 0
          let tempHour = this.stepTwoValidate.hour ? this.stepTwoValidate.hour : 0
          let aliveHour = Number(tempDay * 24) + Number(tempHour)
          let itemHour = Number(this.stepTwoValidate.itemHour) / 60
          if (Number(this.searchParams.triggerCycle) !== 7) {
            if (!this.stepTwoValidate.day && !this.stepTwoValidate.hour) {
              this.$Message.warning(({
                content: '请任意输入任务存活时间的天数或者小时！',
                duration: 6,
                closable: true
              }));
              return false
            }
          }
          if (new Date(this.stepTwoValidate.firstTime).getTime() >= new Date(this.stepTwoValidate.planEndTime).getTime()) {
            this.$Message.warning(({
              content: '首次生成时间不得大于计划截止时间！',
              duration: 6,
              closable: true
            }));
            return false
          }
          console.log('当前时间天数')
          console.log(hour)
          console.log(aliveHour)
          if (hour <= aliveHour) {
            this.$Message.warning(({
              content: '计划截止时间与首次生成时间之差需超过任务存活时间！',
              duration: 6,
              closable: true
            }));
            return false
          }
          this.loading = true
          let firstTime = this.$moment(this.stepTwoValidate.firstTime).format('YYYY-MM-DD HH:mm:00')
          let planEndTime = this.$moment(this.stepTwoValidate.planEndTime).format('YYYY-MM-DD HH:mm:00')
          // let effectiveHour = this.stepTwoValidate.day * 24 + this.stepTwoValidate.hour
          let triggerCycle = this.stepTwoValidate.maintainType == 1 ? this.stepTwoValidate.triggerCycle : this.stepTwoValidate.maintainType == 2 ? 7 : 8
          let dcmMaintainDetailList = this.data.map(item => {
            return {
              deviceId: item.id,
              belongCompanyId: item.belongCompanyId,
              deviceMId: item.deviceMId,
              orgId: item.orgId,
              useCompanyId: item.useCompanyId
            }
          })
          let dcmMaintainProjectList = this.contentData.map(item => {
            return {
              bomId: item.bomId,
              itemId: item.id,
              itemMethod: item.itemMethod,
              itemProject: item.itemProject,
              maxValue: item.maxValue,
              minValue: item.minValue,
              unitName: item.unitName,
              itemHours: item.itemHours,
              sequence: item.sequence
            }
          })
          const planName = JSON.parse(localStorage.getItem('planNameInfo'))
          let data = {
            itemLevel: this.stepTwoValidate.itemLevel,
            deviceCategory: this.formInline.deviceCategory,
            isConfirm: this.stepTwoValidate.isConfirm,
            // planName: this.formInline.planName,
            categoryName: this.formInline.categoryName,
            maintainType: this.stepTwoValidate.maintainType,
            intervalRate: this.stepTwoValidate.intervalRate,
            triggerCycle,
            pdays: this.stepTwoValidate.day,
            phours: this.stepTwoValidate.hour,
            firstTime,
            planEndTime,
            confirmedBy:this.confirmedBy,
            dcmMaintainDetailList,
            dcmMaintainProjectList,
            autoDistribution: this.stepTwoValidate.autoDistribution
          }
          console.log(data,123);
          if (planName) {
            data.planName = planName
          }
          if (!this.editId || this.copyStatus) {
            this.axios({
              method: 'post',
              url: '/dms/dcmMaintainPlan/add',
              data
            }).then(res => {
              
              if (res.code === 200) {
                this.$emit('handlePlanOk')
                this.$Message.success(({content: '新增保养计划成功！', duration: 2, closable: true}))
              } else {
                this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
              }
            }).finally(() => {
              this.loading = false
            })
          } else {
            let params = {
              ...data,
              id: this.editId
            }
            this.axios({
              method: 'put',
              url: '/dms/dcmMaintainPlan/edit',
              data: params
            }).then(res => {
              if (res.code === 200) {
                this.$emit('handlePlanOk')
                this.$Message.success(({content: '编辑保养计划成功！', duration: 2, closable: true}))
              } else {
                this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
              }
            }).finally(() => {
              this.loading = false
            })
          }
        } else {
          // this.$Message.warning(({content: '请将信息填写完整！', duration: 6, closable: true}));
          return;
        }
      });


    },
    addDev() {

      this.customCacheKey = 'addMaintainPlanAddDevice'
      this.getColumnWidth(this.addDevcolumns)

      this.addDevcolumns.reverse().reverse()

      this.addDevVisible = true;
      this.$forceUpdate()
      this.searchList()
    },
    handleSelectionChange(selectionData) {
      // console.log(selectionData)
      let arr = [...selectionData]
      this.selectData = arr.map(item=>{
       return{
        ...item,
        position6:item.installPositionName,
       } 
      })
    },
    addDevCancel() {
      this.addDevVisible = false
      this.$refs.devSelection.selectAll(false)
    },
    addDevOk() {
      if (this.data.length) {
        let arr = this.data.filter(item => this.selectData.some(x => x.id == item.id))
        if (arr.length) {
          this.$Message.warning(({content: '有重复数据，请重新选择！', duration: 6, closable: true}));
          return false
        }
        this.addDevVisible = false
        this.data = [...this.data, ...this.selectData]
        this.$refs.devSelection.selectAll(false)
      } else {
        this.addDevVisible = false
        this.data = [...this.data, ...this.selectData]
        this.$refs.devSelection.selectAll(false)
      }

    },
    handleChangeDevice(value) {
      console.log(value)
      // this.searchList()
    },
    //分页
    changeNum() {
      this.addDevpageParams.pageNum = 1;
      this.searchList();
    },
    searchList() {
      // let deviceMIds = ''
      let data = {}
      // console.log(this.data)
      // this.data.map(item => {
      //   deviceMIds = item.deviceMId + ',' + deviceMIds
      // })
      data = {
          belongCompanyId: this.searchParams.belongCompanyId,
          deviceCategory: this.formInline.deviceCategory,
          installPosition: this.searchParams.orgId,
          triggerCycle: this.searchParams.triggerCycle,
          deviceSpec: this.searchParams.deviceSpec,
          deviceNo: this.searchParams.deviceNo,
          categoryName: this.formInline.categoryName,
          pageNum: this.addDevpageParams.pageNum,
          pageSize: this.addDevpageParams.pageSize,
  			  idList:this.data.map(item=>this.editId?item.deviceId:item.id)
        };
      this.axios({
        method: 'POST',
        url: '/dms/device/page',
        data
      }).then(res => {
        if (res.code === 200) {
          this.addDevdata = res.data.records
          this.addDevpageParams.total = res.data.total
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    changePlanNum() {
      this.searchPlanList();
    },
    searchPlanList() {
      let data = {
        pageNo:this.drawerpageNum,
        pageSize:this.drawerpageSize,
        // triggerCycle: this.stepTwoValidate.maintainType ==1 ? this.stepTwoValidate.triggerCycle : this.stepTwoValidate.maintainType ==2 ? 7 : 8
        // categoryName: this.formInline.categoryName,
        // itemProject: this.searchPlanParams.itemProject,
        // deviceCategory: this.formInline.deviceCategory,
        // itemLevel: this.searchParams.itemLevel,
        // triggerCycle: this.searchParams.triggerCycle,
        // pageNo:this.addDevpageParams.pageNum,
        // pageSize:this.addDevpageParams.pageSize,
      };
      for (let key in this.searchPlanParams) {
        if (key === 'orgId' && this.searchPlanParams['orgId']) {
          const arr = this.searchPlanParams[key]
          const {length, last = length - 1} = arr
          this.$set(data, key, arr[last])
        } else {
          if (this.searchPlanParams[key]) {
            this.$set(data, key, this.searchPlanParams[key])
          }
        }

      }
      this.axios({
        method: 'POST',
        url: '/dms/dcmMaintainItem/list',
        data
      }).then(res => {
        
        if (res.code === 200) {
          this.drawerData = res.data.list
          this.drawerTotal = res.data.total
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    handleDrawerChange(data) {
      let arr = []
      data.map(item => {
        arr.push(item)
      })
      this.drawerSelectionData = arr
    },
    addPlan() {
      this.customCacheKey = 'addMaintainPlanAddPlan'
      this.getColumnWidth(this.drawerColumns)

      this.drawerColumns.reverse().reverse()
      this.searchPlanParams = {}
      this.drawerVisible = true
      this.searchPlanList()
    },
    handleDrawerCancel() {
      this.drawerVisible = false
      this.$refs.drawerSelection.selectAll(false)
    },
    handleDrawerOk() {
      if (this.contentData.length) {
        let arr = this.contentData.filter(item => this.drawerSelectionData.some(x => x.id == item.id))
        if (arr.length) {
          this.$Message.warning(({content: '有重复数据，请重新选择！', duration: 6, closable: true}));
          return false
        }
        this.drawerVisible = false
        this.contentData = [...this.contentData, ...this.drawerSelectionData]
        this.$refs.drawerSelection.selectAll(false)
      } else {
        this.drawerVisible = false
        this.contentData = [...this.contentData, ...this.drawerSelectionData]
        this.$refs.drawerSelection.selectAll(false)
      }
    },
    seeDetail(row) {
      this.visible = true
      this.getWlDetail(row.itemId || row.id)
    },
    getWlDetail(itemId) {
      this.axios({
        method: 'get',
        url: '/dms/dcmMaintainItem/queryById',
        params: {
          id: itemId
        }
      }).then(res => {
        if (res.code === 200) {
          this.formInline = {
            ...res.data,
            planName: this.formInline.planName,
            triggerCycle: res.data.triggerCycle ? res.data.triggerCycle.split(',') : [],
            minValue: res.data.minValue ? Number(res.data.minValue) : '',
            maxValue: res.data.maxValue ? Number(res.data.maxValue) : ''
          }
          if (this.formInline.itemLevel) {
            this.formInline.itemLevel = this.levelList.find(val => val.key === this.formInline.itemLevel).name
          }
          // if (this.formInline.categoryName){
          //   this.categorySelectChange(this.formInline.categoryName)
          // }
          this.toolList = res.data.dcmMaintainToolList.map(item => {
            return {
              ...item,
              isEdit: false,
            }
          })
          this.materData = res.data.dcmMaintainMaterialList.map(item => {
            return {
              ...item,
              isEdit: false,
            }
          })

          // this.materialList = res.data.materialList
          // this.toolList = res.data.toolList
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    deleteRow(row) {
      this.contentData = this.contentData.filter(item => item.id != row.id)
    },
    deleteDevRow(row) {
      this.data = this.data.filter(item => item.id != row.id)
    },
  },
};
</script>

<style lang="scss">
.addMaintainPlan {
  background: #fff;

  .line-title {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    padding: 10px;
    //border-bottom: 1px solid #dddddd;
    align-items: center;
    position: absolute;
    top: 3px;
    right: 0;

    .ivu-steps .ivu-steps-head,
    .ivu-steps-item.ivu-steps-status-process .ivu-steps-title {
      background: transparent;
    }

    .ivu-steps .ivu-steps-title {
      background: transparent;
      vertical-align: sub;
    }

    .back {
      color: #187bdb;
      font-size: 16px;
      padding-left: 20px;
      cursor: pointer;
    }

    .steps {
      width: 400px;
      margin-left: auto;
    }
  }

  .searchBox {
    .addDev {
      font-size: 16px;
      padding: 20px 0 0 10px;
    }

    .labelTop {
      display: flex;
      /*justify-content: space-between;*/
      border-bottom: 2px solid #d7d7d7;

      .item {
        width: 27%;
        margin: 0 10px 20px 10px;
      }
    }

    .label {
      display: flex;

      .item {
        margin-left: 10px;
      }
    }
  }

  .nextBtn {
    text-align: center;
    padding: 50px 0px;

    button {
      margin: 10px;
    }
  }
}

.second {
  .search-form {
    width: 100%;
  }
}

.third {
  .addPlan {
    font-size: 16px;
    padding: 20px 0 20px 10px;
  }
}

.addDevModal {
  .search-form {
    padding: 0;

    .label {
      display: flex;
    }
  }
}

.drawer {
  .search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    button {
      margin: 20px 0 0 15px;
    }
  }

  .demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 30px 15px 30px;
    //text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
  }
}
</style>
